<template>
  <div class="header-box">
    <PageHeader title="报销统计"></PageHeader>
    <div class="top_tabs">
      <van-tabs type="card">
        <van-tab title="本月">
          <div class="line_box_chart">
            <div class="line_box_one">
              <div class="line_box_title">报销费用报表</div>
            </div>
            <div id="chartDom1"></div>
          </div>
          <div class="line_box_chart">
            <div class="line_box_one">
              <div class="line_box_title">报销费用情况</div>
            </div>
            <div id="main"></div>
          </div>

          <div class="line_box">
            <div class="line_box_one">
              <div class="line_box_title">月度报销金额</div>
              <div class="line_box_num">累计： 207800</div>
            </div>
            <div id="chartDom"></div>
          </div>
          <div class="step">
            <div class="line_box_one">
              <div class="line_box_title">审批报销进度</div>
            </div>
            <div class="step_box">
              <div class="step_box_list">
                <div class="step_box_list_title">本月审批中</div>
                <div class="step_box_list_num">￥24,458.13</div>
              </div>
              <div class="step_box_list">
                <div class="step_box_list_title">本月已支出</div>
                <div class="step_box_list_num">￥24,458.13</div>
              </div>
              <div class="step_box_list">
                <div class="step_box_list_title">上月审批中</div>
                <div class="step_box_list_num">￥24,458.13</div>
              </div>
              <div class="step_box_list">
                <div class="step_box_list_title">上月已支出</div>
                <div class="step_box_list_num">￥24,458.13</div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="本季">内容 2</van-tab>
        <van-tab title="本年">内容 3</van-tab>
        <van-tab title="去年">内容 3</van-tab>
        <van-tab title="自定义">内容 3</van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import PageHeader from "../../../src/components/header";
export default {
  name: "APP",
  data() {
    return {
      data8: [
        { value: 126, name: "未报销金额" },
        { value: 390, name: "已报销金额" },
        { value: 425, name: "报销中金额" },
      ],
      data: [
        { value: 126, name: "飞机票" },
        { value: 390, name: "高铁/动车" },
        { value: 225, name: "公交" },
        { value: 125, name: "团建" },
        { value: 325, name: "年会" },
        { value: 825, name: "其他" },
      ],
    };
  },
  mounted() {
    //echarts的自适应设置
    this.$nextTick(() => {
      this.drawChart();
      this.initline();
      this.drawChart1();
      // this.drawCharts();
      //  this.initdrawChart();
    });
    window.onresize = function () {
      myChart.resize();
      // _myChartbar.resize();
    };

    // this.resizeEcharts = () => {
    //   this.$echarts.init(document.getElementById("chartmainbar8")).resize();
    // }
    // window.onresize = this.myChart.resize;
    // window.addEventListener("resize", this.resizeEcharts);
  },
  methods: {
    drawChart1() {
      console.log(111);
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      var my1 = document.getElementById("chartDom1");

      let myChart1 = this.$echarts.init(my1);

      const list = this.data;
      let option1 = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
          title: {
    text: '费用类型              占比      金额'    ,
    
    right: '10%',
    top:'2%',
    textStyle:{
       fontSize:12,
        color:' #999999',
    }
  },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          icon: "square",
          x: "right",
          y: "center",
          orient: "vertical", //设置图例排列纵向显示
          align: "left", //设置图例中文字位置在icon标识符的右侧
          itemGap: 20, //设置图例之间的间距
          padding: [10, 10, 0, 10], //设置图例与圆环图之间的间距
          bottom: "55%", //距离下边距
          formatter: function (name) {
            //该函数用于设置图例显示后的百分比
            var data = list;
            var total = 0;
            var value;
            list.forEach((item) => {
              total += item.value;
              if (item.name == name) {
                value = item.value;
              }
            });

            var p = value; //求出百分比
            var s = Math.round((value / total) * 100);
            console.log(p, "p");
            return `${name}              ${s}%      ￥ ${p}`; //返回出图例所显示的内容是名称+百分比
          },
          textStyle: {
            //图例文字的样式
            color: "#ADADAD",
            fontSize: 12,
          },
          // data: this.data8.name,
        },

        series: [
          {
            name: "数据占比",
            type: "pie",
            radius: ["20%", "50%"],
            center: ["20%", "50%"],
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 5,
            },
            data: this.data,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
              position: "center",
            },
          },
        ],
        color: ["rgba(255,120,91)", "rgba(128,234,190)", "rgba(255,210,60)"],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
    },
    initline() {
      console.log(222);
      var my = document.getElementById("chartDom");

      let myChart = this.$echarts.init(my);
      let option = {
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#3187F6",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    //第一个图标

    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      var my = document.getElementById("main");

      let myChart = this.$echarts.init(my);

      const list = this.data8;
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },

        legend: {
          itemWidth: 10,
          itemHeight: 10,
          icon: "square",
          x: "right",
          y: "center",
          orient: "vertical", //设置图例排列纵向显示
          align: "left", //设置图例中文字位置在icon标识符的右侧
          itemGap: 20, //设置图例之间的间距
          padding: [10, 10, 0, 10], //设置图例与圆环图之间的间距
          bottom: "55%", //距离下边距
          formatter: function (name) {
            //该函数用于设置图例显示后的百分比
            var data = list;
            var total = 0;
            var value;
            list.forEach((item) => {
              total += item.value;
              if (item.name == name) {
                value = item.value;
              }
            });
            var p = value; //求出百分比
            return `${name}                   ￥ ${p}`; //返回出图例所显示的内容是名称+百分比
          },
          textStyle: {
            //图例文字的样式
            color: "#ADADAD",
            fontSize: 12,
          },
          // data: this.data8.name,
        },

        series: [
          {
            name: "数据占比",
            type: "pie",
            radius: ["40%", "62%"],
            center: ["20%", "50%"],
            data: this.data8,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
              position: "center",
            },
          },
        ],
        color: ["rgba(255,120,91)", "rgba(128,234,190)", "rgba(255,210,60)"],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  components: {
    PageHeader,
  },
};
</script>
<style lang="scss" scoped>
.header-box {
  background: rgba(240, 240, 240);
}
#main {
  width: 340px;
  height: 177px;
  background: #ffffff;
  // margin: 20px !important;
}
#chartDom {
  width: 340px;
  height: 230px;
}
#chartDom1 {
  width: 340px;
  height: 240px;
  background: #ffffff;
}
.line_box {
  background: #ffffff;
  margin: 15px !important;
  .line_box_one {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;

    border-bottom: 1px solid rgba(245, 245, 245, 1);
    .line_box_title {
      color: rgba(0, 0, 0, 1);
      font-size: 16px;
      padding: 12px 0 0 16px;
      font-weight: 700;
    }
    .line_box_num {
      color: rgba(33, 34, 41, 1);
      font-size: 12px;
      padding: 16px 16px 0 0;
    }
  }
}
.line_box_chart {
  background: #ffffff;
  margin: 15px;
  .line_box_one {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;

    border-bottom: 1px solid rgba(245, 245, 245, 1);
    .line_box_title {
      color: rgba(0, 0, 0, 1);
      font-size: 16px;
      padding: 12px 0 0 16px;
      font-weight: 700;
    }
    .line_box_num {
      color: rgba(33, 34, 41, 1);
      font-size: 12px;
      padding: 16px 16px 0 0;
    }
  }
}
.step {
  background: #ffffff;
  margin: 5.33vw !important;
  .line_box_one {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;

    border-bottom: 1px solid rgba(245, 245, 245, 1);
    .line_box_title {
      color: rgba(0, 0, 0, 1);
      font-size: 16px;
      padding: 12px 0 0 16px;
      font-weight: 700;
    }
  }
  .step_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .step_box_list {
      background: rgba(23, 119, 255, 0.05);
      border-radius: 8px;

      flex: 0 0 45%;
      .step_box_list_title {
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        padding: 8px 0 0 33px;
      }
      .step_box_list_num {
        color: rgba(51, 51, 51, 1);
        font-size: 18px;
        padding: 10px 0 10px 36px;
      }
    }
  }
}
</style>